<template>
  <div class="content">
    <div class="home">
      <transition name="el-zoom-in-bottom">
        <div class="transition-box">
          <div class="form">
            <el-form
              :model="ruleForm"
              ref="ruleForms"
              status-icon
              :rules="rules"
              label-width="100px"
            >
              <h1 class="text-center">注册</h1>
              <el-form-item label="用户名" prop="name">
                <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input
                  v-model="ruleForm.email"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item label="密码" prop="password">
                <el-input
                  type="password"
                  v-model="ruleForm.password"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item label="确认密码" prop="password2">
                <el-input
                  type="password"
                  v-model="ruleForm.password2"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  style="width: 100%"
                  type="primary"
                  @click="handleSubmit('ruleForms')"
                  >立即注册</el-button
                >
                <div class="checkbox">
                  <a href="/login" class="register">已有账号？立即登录</a>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </transition>
      <img src="../assets/images/register.svg" alt="" />
    </div>
  </div>
</template>

<script>
import { ref, getCurrentInstance, reactive} from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { register } from "@/utils/api";
export default {
  name: "Register",
  setup() {
    const ctx = getCurrentInstance();
    const router = useRouter();

    const ruleForm = reactive({
      name: "",
      email: "",
      password: "",
      password2: "",
      role: "user",
    });
    // 校验规则
    const rules = ref({
      name: [
        {
          message: "Name Error",
          required: true,
          trigger: "blur",
        },
      ],
      email: [
        {
          type: "email",
          message: "Eamil Error",
          required: true,
          trigger: "blur",
        },
      ],
      password: [
        {
          message: "Password Error",
          required: true,
          trigger: "blur",
        },
        {
          min: 3,
          max: 30,
          message: "Password length Error",
        },
      ],
      password2: [
        {
          required: true,
          message: "Password2 could not be empty...",
          trigger: "blur",
        },
        {
          min: 3,
          max: 30,
          message: "Password's length has to be 3 to 30 characters...",
          trigger: "blur",
        },
        { validator: validatePass2, trigger: "blur" },
      ],
    });
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== ruleForm.value.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    // 校验所有规则
    const handleSubmit = (formName) => {
      ctx.refs[formName].validate((valid) => {
        if (valid) {
          register(ruleForm).then((res) => {
            if (res.data.success) {
              ElMessage.success({
                message: "注册成功",
                type: "success",
              });
              router.push("/");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    return { ruleForm, rules, handleSubmit };
  },
};
</script> 

<style scoped>
.home {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.form {
  display: flex;
  justify-content: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
form {
  width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  margin-top: 30px;
  padding: 0 50px;
}
.checkbox {
  float: right;
}
</style>